<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{border:solid 1px black;}
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs");
  cvs.width = cvs.height = 400;

  const c2d = cvs.getContext("2d");

  c2d.beginPath();
  let x = 100;
  let y = 120;
  let w = 200;
  let h = 80;
  c2d.rect(x, y, w, h);
  // c2d.fill();
  c2d.stroke();

  c2d.beginPath();
  let rx = 300
  let ry = 100;
  let r = 50;
  c2d.arc(rx, ry, r, 0, Math.PI*2);
  // c2d.fill();
  c2d.stroke();


  // cvs.onclick = function(eve){
  //   const e = eve || window.event;
  //   // 矩形的检测
  //   if(
  //     e.offsetX > x && e.offsetX < x + w
  //     &&
  //     e.offsetY > y && e.offsetY < y + h
  //   ){
  //     console.log("点到矩形了");
  //   }
  // }

  // =======

  // cvs.onclick = function(eve){
  //   const e = eve || window.event;
  //   // 圆形的检测
  //   let a = rx - e.offsetX;
  //   let b = ry - e.offsetY;
  //   let c = Math.sqrt( a*a + b**2 );
  //   if( c < r ){
  //     console.log("点到圆形了");
  //   }
  // }

  // =========

  // cvs.onclick = function(eve){
  //   const e = eve || window.event;
  //   // 异形的检测：给图形做辅助线，分割或补充成基础形状（矩形或圆形）
  //   let a = rx - e.offsetX;
  //   let b = ry - e.offsetY;
  //   let c = Math.sqrt( a*a + b**2 );
  //   if(
  //     c < r
  //     &&
  //     e.offsetX > x && e.offsetX < x + w
  //     &&
  //     e.offsetY > y && e.offsetY < y + h
  //   ){
  //     console.log("点到异形了");
  //   }
  // }

  // =========

  cvs.onclick = function(eve){
    const e = eve || window.event;
    // 判断一个点，是否在某个路径内
    console.log( c2d.isPointInPath( e.offsetX, e.offsetY ) );
  }







  
</script>
</html>